
 <!--接单业务单详情页-->
 <template>
  <div style="padding-bottom: 47px;">
    <app-head :show="showstate"
              :title="pagetitle"></app-head>
    <div class="car-bbinfo-card mb30">
      <div class="bbno lineb">业务单号：{{OrderData.BBillNo}}</div>
      <div class="bbmain">
        <p class="displayflex"><i>委托货主</i><label class='flex1'>{{OrderData.CargoOwnerName}}</label></p>
        <p class="displayflex"><i>制单日期</i><label class='flex1'>{{OrderData.CreateTime | time}}</label></p>
        <p class="displayflex"><i>送货地址</i><label class='flex1'>{{OrderData.ArrivalCity | city}}{{OrderData.ArrivalDistrict | district}}{{OrderData.ArrivalAddress}}</label></p>
        <p class="displayflex"><i>联系人</i><label class='flex1'>{{OrderData.SendContacts}} {{OrderData.SendContactsTel}}</label></p>
        <!-- <p class="displayflex"><i>订单件数</i><label class='flex1'>{{OrderData.Pkgs}}件</label></p> -->
        <!-- <p class="displayflex"
           v-if="OrderData.ConPKGS && OrderData.ConPKGS !== ''">
          <i>提货件数</i>
          <label class='flex1'>{{OrderData.ConPKGS}}件</label>
        </p>
        <p class="displayflex"
           v-if="OrderData.RecPKGS && OrderData.RecPKGS !== ''">
          <i>签收件数</i><label class='flex1'>{{OrderData.RecPKGS}}件</label>
        </p> -->
      </div>
    </div>

    <div class="car-bbinfo-card excep mb30"
         v-if="OrderData.TEType && OrderData.TEType !== ''">
      <div class="bbmain">
        <p>异常原因<label>{{OrderData.ExceptionMemo || OrderData.Information}}</label></p>
        <p>记录时间<label>{{OrderData.RDate | timeshort}}</label></p>
      </div>
    </div>

    <div class="car-bbinfo-list">
      <div class="bbtitle lineb"><i class="iconfont icon-cargo circle"></i> {{OrderData.BbDetails.length}}种商品</div>
      <!--       
      <scroller lock-x scrollbar-y use-pullup :height="(scrollerHeight).toString()" v-if="OrderData.Tratvehicleex.length>0" :pullup-config="ScrollerConfig" ref="Scroller">
        <div> -->
      <div class="bbitem mb30 displayflex"
           v-for="item in OrderData.BbDetails">
        <img :src="item.PictContent | filterImgUrl">
        <div class="flex1 specs"
             v-if="item.GoodsGuid">
          <p class="ft17 mb10 name">{{item.GoodsName}}</p>
          <p>数量：{{item.Pcks}}</p>
        </div>
        <div class="flex1 specs"
             v-else>
          <p class="ft17 mb10 name">拼箱商品</p>
        </div>
      </div>
      <!-- </div>
      </scroller> -->
    </div>

    <uploader :title="'提货凭证'"
              :img-list="Img52"
              :imgListBd='Img52'
              :max="0"
              v-if="Img52.length > 0"></uploader>
    <uploader :title="'交货凭证'"
              :img-list="Img56"
              :imgListBd='Img56'
              :max="0"
              v-if="Img56.length > 0"></uploader>
    <uploader :title="'签收凭证'"
              :img-list="Img81"
              :imgListBd='Img81'
              :max="0"
              v-if="Img81.length > 0"></uploader>

    <footer-menu :status='2'></footer-menu>
  </div>
</template>
<script>
import footerMenu from "@/components/core/footer/manage.footer.vue";
import appHead from '@/components/core/header/app_headbar.vue';
import uploader from '@/components/share/imageUploader/imageUploader.vue';

import { mapGetters, mapState } from 'vuex'

export default {
  components: {
    footerMenu,
    appHead,
    uploader,
  },
  data () {
    return {
      OrderData: {
        Tratvehicleex: [],
      },
      ScrollerConfig: {
        content: "",
        downContent: "",
        height: 0,
        loadingContent: "",
        upContent: ""
      },
      Img52: [],
      Img56: [],
      Img81: [],
      mh: 0,
    }
  },
  mounted () {
  },
  created () {
    this.getData();
  },
  computed: {
    ...mapState({
      pagetitle: state => state.cfg.appBarTitle,
      showstate: state => state.cfg.showAppBar,
    }),
    ...mapGetters({
      scrollerHeight: "cfg/getConHeight"
    }),
    userinfo () {
      return localStorage.userinfo ? JSON.parse(localStorage.userinfo) : null
    }
  },
  methods: {
    getData () {
      var self = this;
      var query = {
        BBillGuid: this.$route.query.Guid,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
      };
      this.Ajax.post("GetTaskorderDetailEX", query).then((resp) => {
        if (resp.IsSuccess) {
          self.OrderData = resp.Data;

          this.OrderData.HandoverList.forEach((x, i) => {
            let Obj = {},
              Json = [];
            Obj = x.HandoverPict !== '' && x.HandoverPict ? JSON.parse(x.HandoverPict) : {};
            if (Object.keys(Obj).length > 0) {
              Json = Json.concat(Obj.bbill ? Obj.bbill : []);
              Json = Json.concat(Obj.platenumber ? Obj.platenumber : []);
              Json = Json.concat(Obj.invoice ? Obj.invoice : []);
              Json = Json.concat(Obj.logistics ? Obj.logistics : []);
              switch (x.HandoverType) {
                case '1':
                  this.Img52 = Json;
                  break;
                case '2':
                  this.Img56 = Json;
                  break;
                case '3':
                  this.Img81 = Json;
                  break;
              }
            }
          });


          this.$nextTick(() => {
            this.$store.dispatch("cfg/setConHeight");
          })
        } else {
          this.Toast({
            message: "列表为空，请稍后刷新"
          });
        }
      });
    },
  },
}
</script>

